import { PropType } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';
import './index.scss';

export interface ITabPane {
  /** 选项卡标题 */
  label: string;
  /** 是否禁用 */
  disabled?: boolean;
  /** 与选项卡绑定值 value 对应的标识符，表示选项卡别名 */
  name: string | number;
  /** 标签是否可关闭 */
  closable?: boolean;
  /** 标签是否延迟渲染 */
  lazy?: boolean;
  /** 选项卡插槽 */
  vSlots?: {
    /** Tab-pane 的内容 */
    default: () => TAnyFunction<JSX.Element | string>;
    /** Tab-pane 的标题内容 */
    label?: () => TAnyFunction<JSX.Element | string>;
  };
}

export const MciTabs = defineComponent({
  name: 'MciTabs',
  props: {
    tabs: {
      type: Array as PropType<ITabPane[]>,
      default: () => []
    },
    type: {
      type: String as PropType<'default' | 'dark-border' | 'light-border' | 'normal' | 'normal-theme'>,
      default: 'default'
    }
  },
  render() {
    const createTabPanes = () => {
      return this.tabs.map((tab, index) => {
        const { default: slotDefault, label: slotLabel } = tab.vSlots || {};
        const slots: any = {
          default: slotDefault?.(),
          label: slotLabel?.()
        };

        return <ElTabPane key={index} {...tab} vSlots={slots} />;
      });
    };

    return (
      <ElTabs class={['mci-tabs', `is-${this.type}`]} vSlots={this.$slots}>
        {createTabPanes()}
      </ElTabs>
    );
  }
});

export const MciTabPane = ElTabPane;
